<template>
	<view class="merchant-detail-container">
		<!-- 自定义导航栏 -->
		<u-navbar :title="merchantInfo.store_name || '商家详情'" @leftClick="goBack" :autoBack="true">
			<template v-slot:right>
				<view class="share-btn" @click="shareMerchant">
					<image src="/static/o2o/fx@2x.png" class="share-icon"></image>
				</view>
			</template>
		</u-navbar>

		<!-- 商家轮播图 -->
		<view class="merchant-banner" v-if="merchantImages.length > 0">
			<swiper class="swiper-container" :autoplay="true" :interval="3000" :duration="500" :indicator-dots="true" indicator-color="rgba(255,255,255,0.5)" indicator-active-color="#fff">
				<swiper-item v-for="(image, index) in merchantImages" :key="index">
					<image :src="baseUrl+image" class="banner-image" mode="aspectFill" @click="previewImage(index)"></image>
				</swiper-item>
			</swiper>
		</view>

		<!-- 商家基本信息 -->
		<view class="merchant-info" v-if="merchantInfo.store_name">
			<view class="merchant-name">{{ merchantInfo.store_name }}</view>
			<view class="merchant-rating" v-if="merchantInfo.eval_score">
				<view class="stars">
					<text v-for="i in 5" :key="i" class="star" :class="{ filled: i <= Math.floor(merchantInfo.eval_score) }">★</text>
				</view>
				<text class="rating-text">{{ merchantInfo.eval_score }}</text>
			</view>
			<view class="business-hours" v-if="merchantInfo.start_end">
				<text class="hours-text">营业时间：{{ merchantInfo.start_end }}</text>
			</view>
		</view>

		<!-- 商家地址信息 -->
		<view class="merchant-address" v-if="merchantInfo.address">
			<view class="address-content">
				<view class="address-info">
					<image src="/static/o2o/dizhi@2x.png" class="address-icon"></image>
					<view class="address-detail">
						<text class="address-text">{{ merchantInfo.area_name }}{{ merchantInfo.address }}</text>
						<text class="phone-text" v-if="merchantInfo.manager_tel">{{ merchantInfo.manager_tel }}</text>
					</view>
				</view>
				<view class="phone-action" v-if="merchantInfo.manager_tel" @click="callMerchant">
					<image src="/static/o2o/dianhua@2x.png" class="phone-icon"></image>
				</view>
			</view>
		</view>

		<!-- 团购套餐 -->
		<view class="group-goods-section" v-if="groupGoodsList.length > 0">
			<view class="section-title">团购套餐</view>
			<view class="group-goods-list">
				<view 
					v-for="goods in groupGoodsList" 
					:key="goods.group_id"
					@click="viewGroupGoods(goods)"
					class="group-goods-item"
				>
					<view class="goods-content">
						<view class="goods-header">
							<text class="goods-title">{{ goods.title }}{{ goods.need_resv == 1 ? '（需电话预约）' : '' }}</text>
							<text class="sold-count">已售{{ goods.sold_num }}</text>
						</view>
						<view class="goods-price-info">
							<view class="price-section">
								<text class="price-symbol">¥</text>
								<text class="price-value">{{ goods.price }}</text>
							</view>
							<text class="rebate-info">分润 ¥{{ goods.rebate_price }}</text>
						</view>
					</view>
					<view class="buy-action">
						<view class="buy-btn" @click.stop="buyGroupGoods(goods)">购买</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 加载状态 -->
		<view v-if="loading" class="loading-container">
			<text class="loading-text">加载中...</text>
		</view>

		<!-- 空状态 -->
		<view v-if="!loading && !merchantInfo.store_name" class="empty-container">
			<text class="empty-text">商家信息不存在</text>
		</view>
	</view>
</template>

<script>
import api from '../../api/index.js'
import {
		inject
	} from 'vue'

export default {
	components: {
	},
	data() {
		return {
			baseUrl: inject('$baseUrl'),
			
			// 页面参数
			merchantId: '',
			
			// 商家信息
			merchantInfo: {},
			merchantImages: [],
			
			// 团购商品列表
			groupGoodsList: [],
			
			// 页面状态
			loading: false
		}
	},
	
	onLoad(options) {
		console.log('商家详情页面参数:', options)
		
		// 获取商家ID
		if (options.id) {
			this.merchantId = options.id
			this.loadMerchantDetail()
		} else if (options.merch_id) {
			this.merchantId = options.merch_id
			this.loadMerchantDetail()
		} else if (options.store_id) {
			this.merchantId = options.store_id
			this.loadMerchantDetail()
		} else {
			uni.showToast({
				title: '商家ID不能为空',
				icon: 'none'
			})
			setTimeout(() => {
				uni.navigateBack()
			}, 1500)
		}
	},
	
	methods: {
		// 加载商家详情
		async loadMerchantDetail() {
			if (!this.merchantId) return
			
			this.loading = true
			
			try {
				// 加载商家信息
				const merchantRes = await api.o2oApi.getMerchantInfo(this.merchantId)
				console.log('商家信息响应:', merchantRes)
				
				if (merchantRes.r === 0 && merchantRes.data) {
					this.merchantInfo = merchantRes.data.info || {}
					this.merchantImages = merchantRes.data.info_image || []
					
					// 设置页面标题
					if (this.merchantInfo.store_name) {
						uni.setNavigationBarTitle({
							title: this.merchantInfo.store_name
						})
					}
				} else {
					uni.showToast({
						title: merchantRes.msg || '获取商家信息失败',
						icon: 'none'
					})
				}
				
				// 加载团购商品
				const goodsRes = await api.o2oApi.getStoreGoods(this.merchantId)
				console.log('团购商品响应:', goodsRes)
				
				if (goodsRes.r === 0 && goodsRes.data && goodsRes.data.list) {
					this.groupGoodsList = goodsRes.data.list
				} else {
					console.log('暂无团购商品')
				}
				
			} catch (error) {
				console.error('加载商家详情失败:', error)
				uni.showToast({
					title: '加载失败',
					icon: 'none'
				})
			} finally {
				this.loading = false
			}
		},
		
		
		
		// 返回上一页
		goBack() {
			uni.navigateBack();
		},
		
		// 分享商家
		shareMerchant() {
			// 可以实现分享功能
			uni.showToast({
				title: '分享功能开发中',
				icon: 'none'
			})
		},
		
		// 拨打电话
		callMerchant() {
			if (!this.merchantInfo.manager_tel) {
				uni.showToast({
					title: '暂无联系电话',
					icon: 'none'
				})
				return
			}
			
			uni.makePhoneCall({
				phoneNumber: this.merchantInfo.manager_tel,
				fail: (err) => {
					console.error('拨打电话失败:', err)
					uni.showToast({
						title: '拨打失败',
						icon: 'none'
					})
				}
			})
		},
		
		// 预览图片
		previewImage(index) {
			const urls = this.merchantImages.map(img => this.baseUrl+img)
			uni.previewImage({
				current: index,
				urls: urls
			})
		},
		
		// 查看团购商品详情
		viewGroupGoods(goods) {
			uni.navigateTo({
				url: `/pages/o2o/tg-shangpin-xq?group_id=${goods.group_id}&store_id=${goods.store_id}`
			})
		},
		
		// 购买团购商品
		buyGroupGoods(goods) {
			uni.navigateTo({
				url: `/pages/o2o/submit-order?group_id=${goods.group_id}&store_id=${goods.store_id}`
			})
		}
	}
}
</script>

<style lang="scss" scoped>
.merchant-detail-container {
	min-height: 100vh;
	background-color: #eee;
}

.share-icon {
	width: 44rpx;
	height: 44rpx;
	margin-right: 30rpx;
}

/* 商家轮播图 */
.merchant-banner {
	width: 750rpx;
	height: 462rpx;
	position: relative;
	margin-top: 88rpx;
}

.swiper-container {
	width: 100%;
	height: 100%;
}

.banner-image {
	width: 100%;
	height: 100%;
}

/* 商家基本信息 */
.merchant-info {
	background-color: #fff;
	padding: 30rpx;
}

.merchant-name {
	font-size: 34rpx;
	color: #212121;
	font-weight: 700;
	margin-bottom: 20rpx;
}

.merchant-rating {
	display: flex;
	align-items: center;
	margin-bottom: 20rpx;
}

.stars {
	display: flex;
	margin-right: 20rpx;
}

.star {
	color: #ddd;
	font-size: 22rpx;
	margin-right: 4rpx;
	
	&.filled {
		color: #ffa726;
	}
}

.rating-text {
	font-size: 24rpx;
	color: #6e6e6e;
}

.business-hours {
	.hours-text {
		font-size: 24rpx;
		color: #6e6e6e;
	}
}

/* 商家地址信息 */
.merchant-address {
	margin: 10rpx 0;
	background-color: #fff;
}

.address-content {
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 20rpx 0;
}

.address-info {
	flex: 1;
	display: flex;
	align-items: center;
	padding-left: 70rpx;
	background: url('/static/o2o/dizhi@2x.png') no-repeat 30rpx center;
	background-size: 24rpx 30rpx;
}

.address-icon {
	width: 24rpx;
	height: 30rpx;
	margin-right: 20rpx;
}

.address-detail {
	flex: 1;
	border-right: 1rpx solid #ddd;
	padding-right: 20rpx;
}

.address-text {
	font-size: 30rpx;
	color: #212121;
	display: block;
	margin-bottom: 5rpx;
}

.phone-text {
	font-size: 26rpx;
	color: #6e6e6e;
}

.phone-action {
	width: 140rpx;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 0;
	margin: 0;
}

.phone-icon {
	width: 40rpx;
	height: 40rpx;
}

/* 团购套餐 */
.group-goods-section {
	background-color: #fff;
	margin-top: 10rpx;
}

.section-title {
	text-align: center;
	font-size: 30rpx;
	color: #444;
	height: 90rpx;
	line-height: 90rpx;
	border-bottom: 1rpx solid #ddd;
	font-weight: 700;
}

.group-goods-list {
	.group-goods-item {
		display: flex;
		padding: 20rpx 30rpx;
		border-bottom: 1rpx solid #ddd;
		
		&:last-child {
			border-bottom: none;
		}
	}
}

.goods-content {
	flex: 1;
}

.goods-header {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	margin-bottom: 10rpx;
}

.goods-title {
	flex: 1;
	font-size: 28rpx;
	color: #212121;
	margin-right: 20rpx;
}

.sold-count {
	font-size: 24rpx;
	color: #6e6e6e;
}

.goods-price-info {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.price-section {
	display: flex;
	align-items: baseline;
}

.price-symbol {
	font-size: 26rpx;
	color: #ff1e00;
}

.price-value {
	font-size: 26rpx;
	color: #ff1e00;
	font-weight: bold;
}

.rebate-info {
	font-size: 26rpx;
	color: #6e6e6e;
	
	text {
		color: #ff9600;
	}
}

.buy-action {
	display: flex;
	align-items: center;
	padding-top: 10rpx;
}

.buy-btn {
	font-size: 26rpx;
	color: #fff;
	width: 136rpx;
	height: 60rpx;
	line-height: 60rpx;
	background: #ff1e00;
	border: 1rpx solid #ff1e00;
	border-radius: 6rpx;
	text-align: center;
}

/* 加载状态 */
.loading-container {
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 60rpx 0;
	
	.loading-text {
		font-size: 28rpx;
		color: #999;
	}
}

/* 空状态 */
.empty-container {
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 100rpx 0;
	
	.empty-text {
		font-size: 28rpx;
		color: #999;
	}
}
</style>